<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>箭头函数this</title>
    <style>
        .标注 {
            color: red;
        }
    </style>
</head>
<body>
<p>
    目标： 能够熟悉箭头函数不同写法 <br>
    目的：引入箭头函数的目的是更简短的函数写法并且不绑定this，箭头函数的语法比函数表达式更简洁 <br>
    使用场景：箭头函数更适用于那些本来需要 写匿名函数的地方 (它不是替代原来函数的写法)
</p>
<p>
    学习路径： <br>
    1. 基本语法 <br>
    2. 箭头函数参数 <br>
    3. 箭头函数this
</p>
<hr>

<h3> 箭头函数 this</h3>
<p>
    在箭头函数出现之前，每一个新函数根据它是 被如何调用的 来定义这个函数的this值， 非常令人讨厌 <br>
    箭头函数不会创建自己的this, 它只会从自己的 作用域链 的上一层沿用this
</p>
<p class="标注">
    箭头函数不会创建自己的this
</p>
<hr>

<p>
    另外: <br>
    在开发中【使用箭头函数前需要考虑函数中 this 的值】，事件回调函数使用箭头函数时，this 为全局的 window <br>
    因此 DOM事件回调函数为了简便，还是不太推荐使用箭头函数
</p>


<script>
    // 一般情况, this的指向: 谁调用的这个函数，this 就指向谁
    console.log(this)  // window

    // 普通函数this, 指向 window
    function 函数() {
        console.log(this)  // window
    }

    window.函数()

    // 对象方法里面的this, 指向 对象
    const 对象 = {
        姓名: '混合',
        对象_方法: function () {
            console.log(this)  // 对象
        }
    }
    对象.对象_方法()


    console.log('--------- 箭头函数的this --------')
    // 箭头函数的this  是上一层作用域的this 指向
    const 函数1 = () => {
        console.log(this)
        // 这里的结果也是 window, 但是和普通函数的不一样. 而是沿用函数上一层,这里函数上一层就是 window
    }
    函数1()

    // 对象方法 箭头函数this
    const 对象2 = {
        姓名: 'pink老师',
        对象_方法: () => {
            console.log(this)
            // this 指向谁？ window, 因为箭头函数this,指向的是 对象的上一层, 对象的上一层是window
            // window调用 对象, 对象调用 方法.  箭头函数 实际没有this, 那它只能找上一级
        }
    }
    对象2.对象_方法()

    // 注意 嵌套的情况
    const 对象3 = {
        姓名: 'pink老师',
        对象_方法: function () {
            console.log(this)  // this 指向 '对象3', 因为是它调用的 方法
            const 方法内_箭头函数 = () => {
                console.log(this)
                // this 指向 对象3,值和上面的一样 但是原理不一样
                // 这里的this指向的是上一级, 这里上一级是 "对象_方法", 而"对象_方法"的this,指向 "对象3"
            }
            方法内_箭头函数()
        }
    }
    对象3.对象_方法()
</script>


</body>
</html>